<template>
  <div class="material">
    <a-form-model ref="ruleForm" :rules="rules" :model="ruleForm">
      <a-row justify="space-between">
        <a-col :span="8">
          <a-form-model-item has-feedback label="名称" prop="name" :labelCol="{ span: 2 }" :wrapperCol="{ span: 18, offset: 1 }">
            <a-input v-model="ruleForm.name" allow-clear placeholder="请输入" />
          </a-form-model-item>
        </a-col>
        <a-col :span="8" offset="8" push="5">
          <a-form-model-item>
            <a-space>
              <a-button @click="resetForm('ruleForm')">
                重置
              </a-button>
              <a-button :loading="isLoading" type="primary" @click="submitForm('ruleForm')">
                查询
              </a-button>
            </a-space>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
    <a-row justify="space-between" class="middle">
      <a-col :span="22">
        <h3>详情列表</h3>
      </a-col>
      <a-col :span="2">
        <util-modules @refresh="refreshData" @densityChange="densityChange" />
      </a-col>
    </a-row>
    <a-table
      :pagination="false"
      :rowKey="(record) => record.id"
      :loading="isLoading"
      :columns="columns"
      :data-source="data"
      :size="activeSize"
    >
      <span slot="activityImg">
        <span>-</span>
      </span>
      <span slot="action" slot-scope="_, record">
        <a @click="handleCapllyLink(record.activityPath)">查看</a>
      </span>
    </a-table>
    <!-- 查看 -->
    <a-modal v-model="linkVisible" title="活动链接" @ok="handleLinked">
      <a-textarea v-model="siteLink" readonly="readonly" :auto-size="{ minRows: 2, maxRows: 6 }" />
    </a-modal>
  </div>
</template>

<script>
import { columns } from './Adver'
import UtilModules from '_c/UtilModules.vue'
import { getTableSize } from '@/lib/utils'
import { getQcjApiAct, getActSelect, getSlotNoShow } from '@/api/AdverMan/api'
export default {
  name: 'Material',
  components: {
    UtilModules,
  },
  data() {
    return {
      data: [],
      activeSize: '',
      columns,
      isLoading: false,
      siteLink: '',
      linkVisible: false,
      ruleForm: {
        name: '',
      },
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'media' }),
      rules: {},
      pagination: {
        showSizeChanger: true, // 显示可改变每页数量
        pageSizeOptions: ['10', '20', '50', '100'], // 每页数量选项
        showTotal: (total) => `总共  ${total} 条`, // 显示总数
      },
      sk: '',
    }
  },
  mounted() {
    this.qcjApiAct()
    this.slotNoShow()
  },
  methods: {
    /**
     * @func 刷新数据
     */
    refreshData() {
      this.qcjApiAct()
    },
    /**
     * @func 表格密度
     */
    densityChange(value) {
      const { tableSize } = this.$store.state
      this.activeSize = getTableSize(value, tableSize)
    },
    /**
     * @func sk
     */
    async slotNoShow() {
      const [err, data] = await getSlotNoShow()
      if (!err) {
        this.sk = data
      } else {
        this.$msgErr(err)
      }
    },
    /**
     * @func 查看链接
     */
    handleCapllyLink(slotUrl) {
      this.siteLink = `${slotUrl}?sk=${this.sk}`
      this.linkVisible = true
    },
    /**
     * @func 关闭模态框
     */
    handleLinked() {
      this.linkVisible = false
    },
    /**
     * @func 活动列表数据
     */
    async qcjApiAct() {
      this.isLoading = true
      const [err, data] = await getQcjApiAct()
      if (!err) {
        this.data = data ?? []
        this.isLoading = false
      } else {
        this.$msgErr(err)
        this.isLoading = false
      }
    },
    /**
     * @func 活动列表数据-查询
     */
    async actSelect(activityName) {
      this.isLoading = true
      const [err, data] = await getActSelect(activityName)
      if (!err) {
        this.data = data ?? []
        this.isLoading = false
      } else {
        this.$msgErr(err)
        this.isLoading = false
      }
    },
    /**
     * 查询数据
     */
    submitForm() {
      // this.qcjApiAct(this.ruleForm)
      const activityName = this.ruleForm.name
      this.actSelect(activityName)
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetFields()
      this.qcjApiAct()
    },
  },
  filters: {},
  watch: {},
  computed: {},
}
</script>
<style lang="scss" scoped>
.middle {
  margin-bottom: 20px;
}
</style>
